<template>
	<view :data-theme="theme">
		<useNavBar :title="$t(`page.users.logistics.navTitle`)">
			<view
				slot="right"
				style="color: #fff"
				class="iconfont icon-more"
				@click="open"
			></view>
		</useNavBar>
		<view class="logistics">
			<view class="logisticsCon">
				<view class="company acea-row row-between-wrapper">
					<view class="picTxt acea-row row-between-wrapper">
						<view class="iconfont icon-wuliu"></view>
						<view class="text">
							<view
								><text class="name line1"
									>{{ $t(`page.users.logistics.expName`) }}:
								</text>
								{{ orderInfo.expName }}</view
							>
							<view class="express line1">
								<text class="name">
									{{ $t(`page.users.logistics.expNo`) }}:
								</text>
								{{ orderInfo.expNo }}
							</view>
						</view>
					</view>
					<view class="copy copy-data" @click="copy(orderInfo.expNo)">{{
						$t(`page.orderDetails.copy`)
					}}</view>
				</view>
				<view class="item" v-for="(item, index) in expressList" :key="index">
					<view class="circular" :class="index === 0 ? 'on' : ''"></view>
					<view class="text" :class="index === 0 ? 'on-font on' : ''">
						<view>{{ item.AcceptStation }}</view>
						<view class="data" :class="index === 0 ? 'on-font on' : ''">{{
							item.AcceptTime
						}}</view>
					</view>
				</view>
			</view>
			<recommend v-if="expressList.length == 0"></recommend>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
	</view>
</template>

<script>
import { express } from "@/api/order.js";
import //getProductHot
"@/api/store.js";
import { toLogin } from "@/libs/login.js";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
let app = getApp();
export default {
	data() {
		return {
			orderId: "",
			orderInfo: {},
			expressList: [],
			hostProduct: [],
			loading: false,
			goodScroll: true,
			params: {
				//精品推荐分页
				page: 1,
				limit: 10,
			},
			rightDrawer: false,
			theme: "theme3",
		};
	},
	computed: mapState(useAppStore, ["isLogin"]),
	watch: {
		isLogin: {
			handler: function (newV, oldV) {
				if (newV) {
					this.getExpress();
				}
			},
			deep: true,
		},
	},
	onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t(`page.users.logistics.navTitle`),
		});
		if (!options.orderId)
			return this.$util.Tips({
				title: this.$t("message.pay.errorOrder"),
			});
		this.orderId = options.orderId;
		if (this.isLogin) {
			this.getExpress();
		} else {
			toLogin();
		}
	},
	methods: {
		copy(data) {
			uni.setClipboardData({
				data,
				success: () => {
					this.$util.Tips({
						title: this.$t("page.orderDetails.copySuccess"),
					});
				},
			});
		},
		/**
		 * 授权回调
		 */
		onLoadFun: function () {
			this.getExpress();
		},
		copyOrderId: function () {
			uni.setClipboardData({
				data: this.orderInfo.deliveryId,
			});
		},
		getExpress: function () {
			let that = this;
			express(that.orderId).then(function (res) {
				that.$set(that, "orderInfo", res.data);
				if (res.data.logisticsInfo) {
					let express = JSON.parse(res.data.logisticsInfo);
					that.$set(that, "expressList", express.reverse());
				}
			});
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		returns() {
			uni.navigateBack();
		},
	},
	// 滚动到底部
	onReachBottom() {
		if (this.params.page != 1) {
		}
	},
};
</script>

<style scoped lang="scss">
.logistics .header {
	padding: 23rpx 30rpx;
	background-color: #fff;
	height: 166rpx;
	box-sizing: border-box;
}

.logistics .header .pictrue {
	width: 120rpx;
	height: 120rpx;
}

.logistics .header .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 6rpx;
}

.logistics .header .text {
	width: 540rpx;
	font-size: 28rpx;
	color: #999;
	margin-top: 6rpx;
}

.logistics .header .text .name {
	width: 365rpx;
	color: #282828;
}

.logistics .header .text .money {
	text-align: right;
}

.logistics .logisticsCon {
	background-color: #fff;
}

.logistics .logisticsCon .company {
	height: 220rpx;
	margin: 0 0 45rpx 30rpx;
	padding-right: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;
}

.logistics .logisticsCon .company .picTxt {
	width: 520rpx;
}

.logistics .logisticsCon .company .picTxt .iconfont {
	width: 50rpx;
	height: 50rpx;
	background-color: #666;
	text-align: center;
	line-height: 50rpx;
	color: #fff;
	font-size: 35rpx;
}

.logistics .logisticsCon .company .picTxt .text {
	width: 450rpx;
	font-size: 26rpx;
	color: #282828;
}

.logistics .logisticsCon .company .picTxt .text .name {
	color: #999;
}

.logistics .logisticsCon .company .picTxt .text .express {
	margin-top: 5rpx;
}

.logistics .logisticsCon .company .copy {
	font-size: 20rpx;
	// width: 106rpx;
	// height: 40rpx;
	padding: 7rpx 15rpx;
	text-align: center;
	// line-height: 40rpx;
	border-radius: 20rpx;
	border: 1rpx solid #999;
}

.logistics .logisticsCon .item {
	padding: 0 40rpx;
	position: relative;
}

.logistics .logisticsCon .item .circular {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	position: absolute;
	top: -1rpx;
	left: 31.5rpx;
	background-color: #ddd;
}

.logistics .logisticsCon .item .circular.on {
	background-color: $theme-color;
}

.logistics .logisticsCon .item .text.on-font {
	color: $theme-color;
}

.logistics .logisticsCon .item .text .data.on-font {
	color: $theme-color;
}

.logistics .logisticsCon .item .text {
	font-size: 26rpx;
	color: #666;
	width: 615rpx;
	border-left: 1rpx solid #e6e6e6;
	padding: 0 0 60rpx 38rpx;
}

.logistics .logisticsCon .item .text.on {
	border-left-color: #f8c1bd;
}

.logistics .logisticsCon .item .text .data {
	font-size: 24rpx;
	color: #999;
	margin-top: 10rpx;
}

.logistics .logisticsCon .item .text .data .time {
	margin-left: 15rpx;
}
</style>
